---
menu: 表格项
name: DatetimeRange 日期时间范围
route: /component/tableColumns/DatetimeRange
---

import { useState } from 'react'
import { Playground, Props } from 'docz';
import DatetimeRange,  {PropsType}  from './index';
import Table from '../../../steps/table';

# DatetimeRange 日期时间范围表格项

表格项内的展示日期时间范围。

## 何时使用
表格内需要设置日期时间展示时。<br/>
提供了以下可配置项：
- 展示格式设置: `YYYY-MM-DD HH:mm:ss`
- 设置无参数默认值
- 前缀后缀内容添加
- 定义颜色与字体

## 如何使用
### 表格中配置化JSON参考
`data`为表格中获取的参数。 `config`中`columns`为表格列配置信息
```
  columns:[
     {
      field: 'datetimeRange',
      label: '日期-标准值',
      type: 'datetimeRange'
    }
  ]
```

## 代码演示

<Playground>
  {() => {
    return (
      <DatetimeRange
        value={['2020','2021']}
        format={"YYYY"}
      />
    )
  }}
</Playground>


## 表格中日期配置项

### 无参数默认值
<Playground>
  <Table
    data={
        {
        0:[{ }]
        }
      }
    config={
      {
        primary: 'index',
        columns:[
          {
            field: 'datetimeRange',
            label: '日期-无参数默认值',
            type: 'datetimeRange',
            defaultValue: '暂无数据'
          }
        ]
      }
    }
    step={0}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 标准值
<Playground>
  <Table
    data={
        {
        0:[{ datetimeRange: [new Date(),'2020'] }]
        }
      }
    config={
      {
        primary: 'index',
        columns:[
          {
            field: 'datetimeRange',
            label: '日期-标准值',
            type: 'datetimeRange'
          }
        ]
      }
    }
    step={0}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 格式化显示
<Playground>
  <Table
    data={
        {
        0:[{ datetimeRange: [new Date(),'2020'] }]
        }
      }
    config={
      {
        primary: 'index',
        columns:[
          {
            field: 'datetimeRange',
            label: '日期-格式化',
            type: 'datetimeRange',
            format: "YYYY年MM月"
          }
        ]
      }
    }
    step={0}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 定义颜色与字体
<Playground>
  <Table
    data={
        {
        0:[{ datetimeRange: [new Date(),'2020'] }]
        }
      }
    config={
      {
        primary: 'index',
        columns:[
          {
            field: 'datetimeRange',
            label: '日期-定义颜色与字体',
            type: 'datetimeRange',
            format: "YYYY-MM",
            style: {
              color: "green",
              fontSize: 16
            }
          }
        ]
      }
    }
    step={0}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 定义前缀与后缀
<Playground>
  <Table
    data={
        {
        0:[{ datetimeRange: [new Date(),'2020'] }]
        }
      }
    config={
      {
        primary: 'index',
        columns:[
          {
            field: 'datetimeRange',
            label: '日期-定义前缀与后缀',
            type: 'datetimeRange',
            defaultValue: '暂无数据',
            style: {
              prefix: '开始：',
              postfix: 'end'
            }
          }
        ]
      }
    }
    step={0}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

## APIs
 <Props of={PropsType} />